On peut montrer ("le préliminaire") pour connaître les principes généraux du PPP.
Le principe du Projet Personnel de Présentation (PPP
)
est de réaliser en un seul document, de suffixe html
(comme celui-ci, Cahier des charges du PPP.html), qui
met en œuvre les trois langages fondamentaux du Web : HTML pour structurer le document,
CSS pour lui donner une apparence personnalisée
et Javascript pour lui adjoindre une certaine dynamique et, ce faisant,
le faire passer du simple statut de document à celui de document applicatif
.
Le source du document applicatif est construit en utilisant un éditeur de textes multi-langages comme Geany sur PC et sous Linux, ou comme TextWrangler sur Mac, permettant de facilement indenter le source, comme on le fait systématiquement en informatique.
Le sujet du PPP doit mettre en œuvre une dynamique de visualisation, donc pour une lecture non linéaire, que le lecteur pourra moduler à son gré. Pour gagner du temps dans ce projet d'initiation (d'environ 12 heures), le concepteur du document peut évidemment recopier de l'information à partir d'Internet, mais il est alors censé la comprendre pour produire un texte cohérent et pertinent.
La pensée algorithmique
sous-jacente à la programmation est ici de loin l'activité informatique
la plus difficile, car d'une part la définition d'un algorithme est largement dépendante du langage choisi,
et d'autre part on a le paradoxe apparent que moins on connaît le langage et plus les
algorithmes sont difficiles à élaborer pour résoudre des problèmes, si simples soient-ils.
Dans le PPP, la programmation est simplifiée grâce à l'usage d'instructions linguistiques cliquables comme la suivante, commuter (le .conteneur .de (ceci)) .sur ("grossi"), définie directement en HTML dans le document par : <i class="JS fr">commuter (le .conteneur .de (ceci)) .sur ("grossi")</i> (après le chargement du document il suffit de cliquer sur l'instruction qui apparaît alors sous une forme débarrassée de sa syntaxe Javascript).
La dynamique visuelle du document devient l'expression d'une algorithmique élémentaire, directement accessible au débutant. Les instructions linguistiques les plus élémentaires sont décrites dans un autre document.
Le barème ci-dessous permet de savoir en détail ce qu'on entend par qualité
pour un PPP,
en donnant un moyen de la mesurer,
avec une note de qualité pouvant atteindre 20,
note usuelle pour dénoter l'excellence scolaire, mais qui peut ici largement dépasser 30.
La note 20 est donc un objectif à atteindre.
REMARQUE : On peut cacher ("le préliminaire") pour obtenir plus d'espace visuel.
| Affirmation (cliquable) | Vraie | Fausse |
| Références du rédacteur bien visibles du lecteur | 0,5 | -0,5 |
| Texte intégral compréhensible par le rédacteur | 1 | -0,5 |
| Indentation systématique des éléments | 1 | 0 |
| Styles (balise style) uniquement dans la tête (head) | 0,5 | -0,5 |
| Images, sons et vidéos uniquement hypertextes (src="···") | 0,5 | -1 |
| Structure générale | ||
| Aucune balise de présentation, comme font, center ou strong | 0,5 | -1 |
| Usage d'au moins un tableau (balises table, tr et td) | 1 | 0 |
| Aucun saut de ligne brutal (balise br) hors d'un tableau | 0,5 | -0,5 |
| Usage d'au moins un cadre Internet (balise iframe) | 0,5 | 0 |
| Programmation en Javascript | ||
| Usage d'au moins un script simple | 1 | -1 |
| Critère | Cas possibles | |||
| Balises de titre (4 possibilités) | au moins deux h1 (0,5) | au moins deux h2 (0,5) | au moins deux h3 (0,5) | au moins deux h4 (0,5) |
| Images visibles (balise img) | aucune (-0,5) | de 1 à 2 (1) | de 3 à 4 (1,5) | plus de 4 (2) |
| Liens (balise a) | aucun (0) | de 1 à 2 (0,5) | de 3 à 4 (1) | plus de 4 (1,5) |
| Classes (class="···") | aucune (-0,5) | de 1 à 2 (0,5) | de 3 à 4 (1) | plus de 4 (1,5) |
| Identifiants (id="···") | aucun (-0,5) | de 1 à 2 (0,5) | de 3 à 4 (1) | plus de 4 (1,5) |
| Dynamique spécifique (onclick="···") |
aucune (0) | de 1 à 2 (1) | de 3 à 4 (1,5) | plus de 4 (2) |
| Formules (balise formule) | aucune (0) | une (0,5) | 2 ou 3 (1) | plus de 3 (1,5) |
| Booléens (balise bool) effectivement utilisés en JS |
aucun (0) | un (0,5) | 2 ou 3 (1) | plus de 3 (1,5) |
| Variables (balise var) différentes,
effectivement utilisées en JS |
aucune (-0,5) | une (1) | 2 ou 3 (1,5) | plus de 3 (2) |
| Instructions cliquables (<i class="JS fr">) |
aucune (-0,5) | une (0,5) | 2 ou 3 (1) | plus de 3 (1,5) |
| Boucles, effectivement utilisées | aucune (0) | une (0,5) | 2 ou 3 (0,75) | plus de 3 (1) |
| Tests, effectivement utilisés | aucun (0) | un (0,25) | 2 ou 3 (0,5) | plus de 3 (1) |
| Fonctions, effectivement utilisés | aucune (0) | une (0,75) | 2 ou 3 (1) | plus de 3 (1,5) |
| Taille (en Ko) | < 4 (-1) | ∈ [4 ; 6[ (1) | ∈ [6 ; 8[ (1,5) | ≥ 8 (2) |
| Taille des scripts (en lignes de ≈ 50 car.) |
< 5 (0) | ∈ [5 ; 10[ (1) | ∈ [10 ; 20[ (1,5) | ≥ 20 (2) |
| Fautes d'orthographe | au moins 10 (-2) | de 6 à 9 (-1,5) | de 3 à 5 (-0,5) | de 0 à 2 (0,5) |
| Affirmation (cliquable) | Vraie | Fausse | ||
| Usage de background-color | 0,25 | 0 | ||
| Usage de background-image | 0,25 | 0 | ||
| Usage de border | 0,5 | -0,5 | ||
| Usage de box-shadow | 0,5 | 0 | ||
| Usage de color | 0,25 | 0 | ||
| Usage de display | 0,5 | 0 | ||
| Usage de font-size | 0,25 | 0 | ||
| Usage de font-style | 0,25 | 0 | ||
| Usage de font-weight | 0,25 | 0 | ||
| Affirmation (cliquable) | Vraie | Fausse | ||
| Usage de height | 0,5 | 0 | ||
| Usage de margin | 0,5 | 0 | ||
| Usage de padding | 0,5 | 0 | ||
| Usage de text-align | 0,25 | -0,25 | ||
| Usage de text-shadow | 0,5 | 0 | ||
| Usage de width | 0,5 | -0,25 | ||
| Usage de :hover pour un style dynamique | 0,75 | 0 | ||
| Usage des classes Exemple : div.tableau { ··· } | 0,75 | 0 | ||
| Usage des identifiants Exemple : [id="le préliminaire"] { ··· } | 0,75 | 0 | ||